<template>
  <!-- 添加 -->
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="600px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #title>
      <div
        class="u-relative u-flex u-row-center u-user-select-none custom-header"
      >
        <span class="custom-header--title">关联卸货地点</span>
        <div class="u-absolute-r custom-header--action">
          <i
            class="el-dialog__close u-cursor-pointer el-icon el-icon-close"
            v-throttle="() => $emit('cancel')"
          ></i>
        </div>
      </div>
    </template>
    <div>
      <el-form
        ref="elForm"
        size="medium"
        label-width="6em"
        label-position="left"
        line-height="0px"
      >
        <el-form-item class="disPeiXun__label" prop="beizhu" label="卸货地点：">
          <el-select
            size="mini"
            v-model="xiehuodidian"
            filterable
            clearable
            placeholder="卸货地点"
          >
            <el-option
              v-for="item in suoshuzuzhiOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" class="u-m-l-10" @click="pitch"
            >选中</el-button
          >
          <el-button type="primary" size="mini" @click="Invert">反选</el-button>
        </el-form-item>
      </el-form>

      <el-checkbox-group v-model="checkList">
        <el-checkbox label="阿翰达供应链有限公司"></el-checkbox>
        <el-checkbox label="万江安泰物汤"></el-checkbox>
        <el-checkbox label="韵馭料思倍德化工物沪有限公司"></el-checkbox>
        <el-checkbox label="密尔克卫化工供务股份"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div style="margin-bottom: 25px">
      <div class="modal__footer">
        <div class="modal__center">
          <el-button
            type="primary"
            class="btn-cancel"
            v-throttle="() => $emit('cancel')"
            >关 联</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "xiehuodidian",

  mixins: [],

  //   组件列表
  components: {},

  props: {
    mode: {
      type: String,
      default: "adds",
    },
  },

  data() {
    return {
      checkList: [],
      dialogVisible: true,
      xiehuodidian: "",
      suoshuzuzhiOptiopns: [
        {
          ID: "123",
          Name: "广东",
        },
      ],
    };
  },

  methods: {
    pitch() {
      this.checkList = [
        "阿翰达供应链有限公司",
        "万江安泰物汤",
        "韵馭料思倍德化工物沪有限公司",
        "密尔克卫化工供务股份",
      ];
    },
    Invert() {
      this.checkList = [];
    },
    sendOrdersSubmit() {
      this.$notify.success({
        title: "消息",
        message: "保存成功",
        position: "bottom-right",
      });
      this.$emit("done");
    },
  },

  created() {},
};
</script>

<style lang="scss" scoped>
::v-deep .modal {
  &__footer {
    margin-bottom: -35px;
    margin-top: 10px;
  }

  &__center {
    display: flex;
    justify-content: space-around;
  }
}

.btn-cancel {
  width: 200px;
  background: rgb(4, 130, 176);
}

// 分页
.pagination {
  display: flex;
  justify-content: space-between;

  & .summary {
    & .el-button--default {
      width: 96px;
      background: rgb(4, 130, 176);
      color: #fff;
      text-align: center;
    }
  }
}

.custom--table {
  ::v-deep tr.current-row > td.el-table__cell {
    color: #fff;
    background-color: #0482b0 !important;
  }
}

// 弹窗表头/关闭
::v-deep .el-dialog__header {
  background: rgb(204, 204, 204);

  & .el-dialog__headerbtn {
    // display: none;
    position: absolute;
    top: 8px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 30px;
    font-weight: 400;
  }
}

::v-deep .disPeiXun {
  &__label {
    font-size: 16px;
    width: 100%;

    & .el-input__inner {
      text-align: left !important;
    }

    & em {
      color: rgb(42, 130, 228);
      font-style: unset;
    }

    & label {
      font-size: 16px;
      font-weight: 500;
    }
  }

  &__divbutton {
    & .el-radio-button__inner {
      width: 264px;
      height: 35px;
      border-radius: 4px;
      background: rgb(4, 130, 176);
      color: #fff;
    }
  }
}

// 通知回执
.Peixun {
  margin: 20px 25px auto;
  font-size: 15px;

  & em {
    color: rgb(42, 130, 228);
    font-style: unset;
  }

  &_But {
    height: 27px;
    width: 100px;
    justify-content: center;
    align-items: center;
    background: rgb(4, 130, 176);
    border: 1px solid rgb(176, 177, 177);
    color: #fff;
  }
}

.XueXICaiLiao {
  &_But {
    position: absolute;
    top: 50%;
    right: 10px;
    border: 0.5px solid;
    padding: 0 10px 0;
    min-width: 60px;
    line-height: 25px;
    transform: translateY(-50%);
  }

  &_Span {
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
    color: rgba(129, 129, 130, 1);
  }
}

.XueXICaiLiao_Span:hover {
  color: rgb(64 158 255);
}

.XueXICaiLiao_But:hover {
  background-color: #fff;
}

.isDisabled {
  display: none;
}
</style>
